import React, { FC } from 'react'
import { Space, Typography, Button, Form, Input } from 'antd'
import { UserAddOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import styles from './Register.module.scss'
import { LOGIN_PATHNAME } from '../router'
const { Title } = Typography
const Register: FC = () => {
    const onFinishHandle = (value: any) => {
        console.log(value)
    }
    return <div className={styles.container}>
        <div>
            <Space>
                <Title level={2}>
                    <UserAddOutlined />
                </Title>
                <Title level={2}>
                    注册新用户
                </Title>
            </Space>
        </div>
        <div>
            <Form
                name="register"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinishHandle}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        { required: true, message: '请输入用户名' },
                        { type: 'string', min: 5, max: 20, message: '字符长度要在 5-20 之间' },
                        { pattern: /^\w+$/, message: '只能是数字字母下划线' }
                    ]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        { required: true, message: '请输入密码' }
                    ]}
                >
                    <Input.Password placeholder='请输入密码' />
                </Form.Item>
                <Form.Item
                    label="确认密码"
                    name="confirm"
                    dependencies={['password']}
                    rules={[
                        { required: true, message: '请再次输入密码' },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve()
                                } else {
                                    return Promise.reject(new Error('两次输入的密码不一致'))
                                }
                            }
                        })
                    ]}
                >
                    <Input.Password placeholder='请再次输入密码' />
                </Form.Item>
                <Form.Item
                    label="昵称"
                    name="nickname"
                    rules={[
                        { required: true, message: '请输入昵称' }
                    ]}
                >
                    <Input placeholder='请输入昵称' />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Space>
                        <Button type='primary' htmlType='submit'>注册</Button>
                        <Link to={LOGIN_PATHNAME}>已有账户，请登录</Link>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    </div>
}

export default Register